<template>
  <div class="app-container">
    <el-row :gutter="20" class="mb20">
      <el-col :span="6"><el-input v-model="req.title_" type="text" placeholder="请输入规则名称" @change="getList"></el-input></el-col>
      <el-col :span="4">
        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
        <el-button type="success" icon="el-icon-plus" @click="add">新增</el-button>
      </el-col>
    </el-row>

    <el-table :data="list" border style="width: 100%">
      <el-table-column type="index" label="序号" width="60" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="name" label="规则名称" min-width="120" align="left" show-overflow-tooltip></el-table-column>
      <el-table-column prop="status" label="启用状态" min-width="120" align="left" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <span>{{ row.enabled == 1 ? '启用' : '禁用' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template slot-scope="{ row }">
          <el-button @click="edit(row)" type="text" size="small">编辑</el-button>
          <el-button @click="del(row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-show="total" :total="total" :page.sync="req.page" :limit.sync="req.pageSize" @pagination="getList"></Pagination>

    <!-- 弹窗 -->
    <edit :show.sync="show" :item="current" @change="getList"></edit>
  </div>
</template>

<script>
import edit from './components/edit.vue';
import { ruleList, ruleDel } from '@/api/checkRule';
export default {
  components: {
    edit
  },
  data() {
    return {
      show: false,
      current: null,
      list: [],
      total: 0,
      req: {
        title_: null,
        page: 1,
        pageSize: 20
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取列表
    getList() {
      ruleList(this.req).then((res) => {
        this.list = res.data || [];
        this.total = res.total;
      });
    },

    // 添加用户
    add() {
      this.current = {};
      this.show = true;
    },
    // 删除用户
    del(row) {
      this.$modal.confirm('确定删除此条数据吗？').then((res) => {
        // 请求服务器删除数据
        ruleDel({ id: row.id }).then((res) => {
          // 刷新数据
          this.getList();
        });
      });
    },
    // 修改用户
    edit(row) {
      this.current = JSON.parse(JSON.stringify(row));
      this.show = true;
    }
  }
};
</script>
